﻿<%@ Page Title="" Language="C#" MasterPageFile="~/ASP/HomeSite.Master" AutoEventWireup="true"
    CodeBehind="MyUserInfo.aspx.cs" Inherits="Agricultural_Sales.ASP.MyUserInfo" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
        <style>
            .user-info-container {
                max-width: 800px;
                margin: 30px auto;
                background: #fff;
                border-radius: 15px;
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
                overflow: hidden;
            }

            .user-header {
                background: linear-gradient(135deg, #4CAF50, #45a049);
                color: white;
                padding: 30px;
                text-align: center;
                position: relative;
            }

            .user-header h2 {
                margin: 0;
                font-size: 28px;
                font-weight: 300;
            }

            .avatar-section {
                text-align: center;
                margin: 30px 0;
            }

            .avatar-container {
                position: relative;
                display: inline-block;
                margin-bottom: 20px;
                cursor: pointer;
            }

            /* 将个人信息页面的大头像样式改为 profile-avatar */
            .profile-avatar {
                width: 150px;
                height: 150px;
                border-radius: 50%;
                border: 5px solid #4CAF50;
                object-fit: cover;
                box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
                transition: all 0.3s ease;
                cursor: pointer;
            }

            .profile-avatar:hover {
                transform: scale(1.05);
                box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
            }

            .avatar-upload {
                position: absolute;
                bottom: 10px;
                right: 10px;
                background: #4CAF50;
                color: white;
                border: none;
                border-radius: 50%;
                width: 40px;
                height: 40px;
                cursor: pointer;
                font-size: 16px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
                transition: all 0.3s ease;
            }

            .avatar-upload:hover {
                background: #45a049;
                transform: scale(1.1);
            }

            .info-form {
                padding: 30px;
            }

            .form-row {
                display: flex;
                margin-bottom: 25px;
                gap: 20px;
            }

            .form-group {
                flex: 1;
            }

            .form-group label {
                display: block;
                margin-bottom: 8px;
                color: #333;
                font-weight: 500;
                font-size: 14px;
            }

            .form-control {
                width: 100%;
                padding: 12px 15px;
                border: 2px solid #e0e0e0;
                border-radius: 8px;
                font-size: 14px;
                transition: all 0.3s ease;
                box-sizing: border-box;
            }

            .form-control:focus {
                outline: none;
                border-color: #4CAF50;
                box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
            }

            .form-control:disabled {
                background-color: #f5f5f5;
                color: #666;
            }

            .btn-container {
                text-align: center;
                padding: 20px 30px;
                background: #f8f9fa;
            }

            .btn {
                padding: 12px 30px;
                border: none;
                border-radius: 25px;
                font-size: 16px;
                font-weight: 500;
                cursor: pointer;
                transition: all 0.3s ease;
                margin: 0 10px;
                min-width: 120px;
            }

            .btn-primary {
                background: linear-gradient(135deg, #4CAF50, #45a049);
                color: white;
            }

            .btn-primary:hover {
                background: linear-gradient(135deg, #45a049, #3d8b40);
                transform: translateY(-2px);
                box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
            }

            .btn-secondary {
                background: #6c757d;
                color: white;
            }

            .btn-secondary:hover {
                background: #5a6268;
                transform: translateY(-2px);
                box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
            }

            .btn-edit {
                background: linear-gradient(135deg, #2196F3, #1976D2);
                color: white;
            }

            .btn-edit:hover {
                background: linear-gradient(135deg, #1976D2, #1565C0);
                transform: translateY(-2px);
                box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
            }

            .user-type-badge {
                display: inline-block;
                padding: 6px 15px;
                background: rgba(255, 255, 255, 0.2);
                border-radius: 20px;
                font-size: 14px;
                margin-top: 10px;
            }

            .success-message {
                background: #d4edda;
                color: #155724;
                padding: 15px;
                border-radius: 8px;
                margin-bottom: 20px;
                border: 1px solid #c3e6cb;
                text-align: center;
            }

            .error-message {
                background: #f8d7da;
                color: #721c24;
                padding: 15px;
                border-radius: 8px;
                margin-bottom: 20px;
                border: 1px solid #f5c6cb;
                text-align: center;
            }

            .password-section {
                display: none;
            }

            .edit-buttons {
                display: none;
            }

            @media (max-width: 768px) {
                .form-row {
                    flex-direction: column;
                    gap: 0;
                }

                .user-info-container {
                    margin: 15px;
                }

                /* 响应式设计中也要使用 profile-avatar */
                .profile-avatar {
                    width: 120px;
                    height: 120px;
                }
            }
        </style>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <div class="user-info-container">
            <div class="user-header">
                <h2>个人信息管理</h2>
                <asp:Label ID="lblUserType" runat="server" CssClass="user-type-badge"></asp:Label>
            </div>

            <div class="avatar-section">
                <div class="avatar-container" onclick="document.getElementById('<%=fileAvatar.ClientID%>').click();">
                    <!-- 将 CssClass 从 user-avatar 改为 profile-avatar -->
                    <asp:Image ID="imgAvatar" runat="server" CssClass="profile-avatar" />
                    <div class="avatar-upload">📷</div>
                    <asp:FileUpload ID="fileAvatar" runat="server" style="display:none;" onchange="previewAvatar(this)"
                        accept="image/*" />
                </div>
            </div>

            <div class="info-form">
                <asp:Panel ID="pnlMessage" runat="server" Visible="false">
                    <asp:Label ID="lblMessage" runat="server"></asp:Label>
                </asp:Panel>

                <div class="form-row">
                    <div class="form-group">
                        <label>用户名</label>
                        <asp:TextBox ID="txtUserName" runat="server" CssClass="form-control" Enabled="false">
                        </asp:TextBox>
                    </div>
                    <div class="form-group">
                        <label>用户ID</label>
                        <asp:TextBox ID="txtUserId" runat="server" CssClass="form-control" Enabled="false">
                        </asp:TextBox>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label>联系电话</label>
                        <asp:TextBox ID="txtPhone" runat="server" CssClass="form-control" Enabled="false"></asp:TextBox>
                    </div>
                    <div class="form-group">
                        <label>用户类型</label>
                        <asp:TextBox ID="txtUserTypeDisplay" runat="server" CssClass="form-control" Enabled="false">
                        </asp:TextBox>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label>联系地址</label>
                        <asp:TextBox ID="txtAddress" runat="server" CssClass="form-control" TextMode="MultiLine"
                            Rows="3" Enabled="false"></asp:TextBox>
                    </div>
                </div>

                <div class="form-row password-section" id="passwordSection">
                    <div class="form-group">
                        <label>新密码（留空则不修改）</label>
                        <asp:TextBox ID="txtNewPassword" runat="server" CssClass="form-control" TextMode="Password">
                        </asp:TextBox>
                    </div>
                    <div class="form-group">
                        <label>确认新密码</label>
                        <asp:TextBox ID="txtConfirmPassword" runat="server" CssClass="form-control" TextMode="Password">
                        </asp:TextBox>
                    </div>
                </div>
            </div>

            <div class="btn-container">
                <asp:Button ID="btnEdit" runat="server" Text="编辑信息" CssClass="btn btn-edit"
                    OnClientClick="toggleEditMode(); return false;" />
                <div class="edit-buttons" id="editButtons">
                    <asp:Button ID="btnSave" runat="server" Text="保存修改" CssClass="btn btn-primary"
                        OnClick="btnSave_Click" />
                    <asp:Button ID="btnCancel" runat="server" Text="取消" CssClass="btn btn-secondary"
                        OnClientClick="cancelEdit(); return false;" />
                </div>
            </div>
        </div>

        <script>
            var isEditMode = false;

            function toggleEditMode() {
                isEditMode = !isEditMode;

                // 切换输入框的启用状态
                document.getElementById('<%=txtPhone.ClientID%>').disabled = !isEditMode;
                document.getElementById('<%=txtAddress.ClientID%>').disabled = !isEditMode;

                // 显示/隐藏密码区域
                var passwordSection = document.getElementById('passwordSection');
                passwordSection.style.display = isEditMode ? 'flex' : 'none';

                // 显示/隐藏按钮
                var editButton = document.getElementById('<%=btnEdit.ClientID%>');
                var editButtons = document.getElementById('editButtons');

                if (isEditMode) {
                    editButton.style.display = 'none';
                    editButtons.style.display = 'block';
                } else {
                    editButton.style.display = 'inline-block';
                    editButtons.style.display = 'none';
                }
            }

            function cancelEdit() {
                // 重置编辑状态
                isEditMode = false;

                // 禁用输入框
                document.getElementById('<%=txtPhone.ClientID%>').disabled = true;
                document.getElementById('<%=txtAddress.ClientID%>').disabled = true;

                // 隐藏密码区域
                document.getElementById('passwordSection').style.display = 'none';

                // 清空密码框
                document.getElementById('<%=txtNewPassword.ClientID%>').value = '';
                document.getElementById('<%=txtConfirmPassword.ClientID%>').value = '';

                // 显示/隐藏按钮
                document.getElementById('<%=btnEdit.ClientID%>').style.display = 'inline-block';
                document.getElementById('editButtons').style.display = 'none';

                // 触发服务器端取消事件
                __doPostBack('<%=btnCancel.UniqueID%>', '');
            }

            function previewAvatar(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        document.getElementById('<%=imgAvatar.ClientID%>').src = e.target.result;
                    }
                    reader.readAsDataURL(input.files[0]);
                }
            }
        </script>
    </asp:Content>